
import { useState } from 'react';

const AboutPage = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    if (count >= 10) {
      return;
    }
    setCount(count + 1);
  };

  const decrementCount = () => {
    if (count <= 0) {
      return;
    }
    setCount(count - 1);
  }

  return (
    <div className="p-8 bg-gray-100">
      <h1 className="text-3xl font-bold text-gray-800">About Us</h1>
      <p className="mt-2 text-gray-600">This is a simple Next.js application.</p>
      <p className="mt-4 text-2xl text-gray-800">Count: {count}</p>
      <button
        className="mt-4 mr-2 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed"
        onClick={decrementCount}
        disabled={count <= 0}
      >
        Decrement
      </button>
      <button
        className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed"
        onClick={incrementCount}
        disabled={count >= 10}
      >
        Increment
      </button>
    </div>
  );
};

export default AboutPage;